<template>
    <main-layout class="mine">
        <div></div>
        <div class="mine">
            <div class="top">
            <router-link tag="i" to="/myPage/news" class="iconfont">&#xe62f;</router-link>
            <span>我的</span>
            <div class="rightIcon">
                <router-link tag="i" to="/myPage/setup"  class="iconfont">&#xe8b7;</router-link>
                <router-link tag="i" to="/h"  class="iconfont">&#xe73d;</router-link>
            </div>
        </div>
        <!-- 个人信息 -->
            <div class="userInformation">
                <!-- <img src="https://img1.baidu.com/it/u=3176894323,4107754512&fm=253&fmt=auto&app=138&f=PNG?w=502&h=500" alt=""> -->
                <div class="userImg">
                </div>
                <div class="user">
                    <p>匠心</p>
                    <p>黄金会员</p>
                </div>
            </div>
            <ul class="gz">
                <li>
                    <p>匠币</p>
                    <p class="num">888</p>
                </li>
                <li>
                    <p>优惠券</p>
                    <p class="num">66</p>
                </li>
                <li>
                    <p>关注</p>
                    <p class="num">100</p>
                </li>
                <li>
                    <p>粉丝</p>
                    <p class="num">888</p>
                </li>
            </ul>
            <ul class="dd">
                <router-link to="/myPage/myorder" tag="li">
                    <i class="iconfont">
                        &#xe645;
                    </i>
                    <p>我的订单</p>
                </router-link>
                <li>
                    <i class="iconfont">
                        &#xe600;
                    </i>
                    <p>待付款</p>
                </li>
                <li>
                    <i class="iconfont">
                        &#xe770;
                    </i>
                    <p>待收货</p>
                </li>
                <li>
                    <i class="iconfont">
                        &#xe602;
                    </i>
                    <p>待评价</p>
                </li>
                <li>
                    <i class="iconfont">
                        &#xe651;
                    </i>
                    <p>售后服务</p>
                </li>
            </ul>

            <ul class="bar">
                <li>
                    <i class="iconfont">&#xe601;</i>
                    <p>我的足迹</p>
                    <span>10</span>
                    <i class="iconfont">&#xe88e;</i>
                </li>
                <li>
                    <i class="iconfont"> &#xe641;</i>
                    <p>我的评价</p>
                    <span>10</span>
                    <i class="iconfont">&#xe88e;</i>
                </li>
                <li>
                    <i class="iconfont"> &#xe694;</i>
                    <p>地址管理</p>
                    <i class="iconfont">&#xe88e;</i>
                </li>
                <li>
                    <i class="iconfont">&#xe8a6;</i>
                    <p>我的会员</p>
                    <span>黄金会员</span>
                    <i class="iconfont">&#xe88e;</i>
                </li>
                <li>
                    <i class="iconfont">&#xe8a6;</i>
                    <p>任务中心</p>
                    <span>赚匠币</span>
                    <i class="iconfont">&#xe88e;</i>
                </li>
                <li>
                    <i class="iconfont"> &#xe642;</i>
                    <p>每日签到</p>
                    <span>得奖励</span>
                    <i class="iconfont">&#xe88e;</i>
                </li>
                <li>
                    <i class="iconfont">&#xe654;</i>
                    <p>幸运抽奖</p>
                    <span>100</span>
                    <i class="iconfont">&#xe88e;</i>
                </li>
                <li>
                    <i class="iconfont">&#xe655;</i>
                    <p>邀请有理</p>
                    <i class="iconfont">&#xe88e;</i>
                </li>
                <li>
                    <i class="iconfont">&#xea0a;</i>
                    <p>服务中心</p>
                    <i class="iconfont">&#xe88e;</i>
                </li>
                <li>
                    <i class="iconfont">&#xe8b7;</i>
                    <p>系统设置</p>
                    <i class="iconfont">&#xe88e;</i>
                </li>
            </ul>
        </div>
    </main-layout>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>
*{box-sizing: border-box;}
@font-face {
  font-family: 'iconfont';  /* Project id 3288323 */
  src: url('//at.alicdn.com/t/font_3288323_goy5f6jto49.woff2?t=1648622353093') format('woff2'),
       url('//at.alicdn.com/t/font_3288323_goy5f6jto49.woff?t=1648622353093') format('woff'),
       url('//at.alicdn.com/t/font_3288323_goy5f6jto49.ttf?t=1648622353093') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
.mine{
    height: 900px;
}
    .top{
        position: fixed;
        top: 0;
        width: 100%;
        background-color: white;
        height: 45px;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        align-items: center;
        span{
            font-size: 20px;
            font-weight: bold;
            color: rgb(109, 106, 106);
        }
        i{
            font-size: 18px;
        }
        .rightIcon{
            font-size: 18px;
            i{
                margin-left: 6px;
            }
        }
    }
    .userInformation{
        width: 100%;
        height: 176px;
        background-color: rgb(245, 103, 103);
        padding-top: 45px;
        display: flex;
        align-items: center;
        .userImg{
            margin-left: 50px;
            border-radius: 50%;
            width: 58px;
            height: 58px;
            background: url(https://img1.baidu.com/it/u=3176894323,4107754512&fm=253&fmt=auto&app=138&f=PNG?w=502&h=500) center/cover;
        }
        .user{
            margin-left: 10px;
            p{
                font-size: 16px;
                color: white;
            }
            p:nth-child(2){
                font-size: 12px;
                margin-top: 10px;
                padding: 5px;
                line-height: 14px;
                border: 1px solid wheat;
                border-radius: 18px;
            }
        }
    }
    .gz{
        width: 100%;
        height: 94px;
        background-color: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li{
            width: 25%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            p{
                font-size: 12px;
                color: #999999;
            }
            .num{
                font-size: 18px;
                margin-top: 5px;
                font-weight: bold;
                color: red;
            }
        }
    }
    .dd{
        width: 100%;
        height: 70px;
        padding: 0n 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: white;
        margin-top: 20px;
        li{
            i{
                font-size: 30px;
            }
            font-size: 12px;
            color: #666;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 20%;
        }
    }
    .bar{
        li{
            width: 100%;
            height: 45px;
            background-color: white;
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #333;
            i{
                font-size: 22px;
                color: #666;
            }
            p{
                flex: 1;
                margin-left: 10px;
            }
        }
        li:nth-child(1),li:nth-child(4),li:nth-child(7){
            margin-top: 15px;
        }
    }
</style>
